const gulp =require('gulp'),
      htmlmin = require('gulp-htmlmin'),
      cleanCss = require('gulp-clean-css'),
      uglify =require('gulp-uglify'),
      autoprefixer = require('gulp-autoprefixer'),
      babel =require('gulp-babel')
      connect = require('gulp-connect')
      sass = require('gulp-sass'),
      del = require('del'),
      proxy = require('http-proxy-middleware')
const path = {
    html:{
        src:'src/**/*.html',
        dest:'dist'
    },
    css:{
        src:'src/css/**/*.scss',
        dest:'dist/css'
    },
    js:{
        src:'src/js/**/*.js',
        dest:'dist/js'
    },
    img: {
        src: 'src/img/**/*',
        dest: 'dist/img'
    },
    libs: {
        src: 'src/libs/**/*',
        dest: 'dist/libs'
    }
}
const delDist = () => del('dist')

const html = () =>{
    return gulp.src(path.html.src)
    .pipe(htmlmin({
        removeComments: true,//清除HTML注释
        collapseWhitespace: true,//压缩HTML
        collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input checked />
          removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
          removeScriptTypeAttributes: false,//删除<script>的type="text/javascript"
          removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
          minifyJS: true,//压缩页面JS
          minifyCSS: true//压缩页面CSS
    }))
    .pipe(gulp.dest(path.html.dest))  
    .pipe(connect.reload())
}
const css = ()=>{
    return gulp.src(path.css.src)
    .pipe(sass()) // 先把sass编译成css
    .pipe(autoprefixer())
    .pipe(cleanCss())
    .pipe(gulp.dest(path.css.dest))
    .pipe(connect.reload())
}
const js = () => {
    return gulp.src(path.js.src)
        .pipe(babel({
            presets: ['@babel/env']
        }))
        .pipe(uglify())
        .pipe(gulp.dest(path.js.dest))
        .pipe(connect.reload())
}
const server = () => {
    connect.server({
        root: 'dist', // 项目运行根目录 dist
        port: 2333, // 服务器自定义端口号
        livereload: true,
})
}
const watch = () => {
    // 当html文件发生修改的时候重新执行html任务
    gulp.watch(path.html.src, html)
    gulp.watch(path.css.src, css)
    gulp.watch(path.js.src, js)
}
const img = () => gulp.src(path.img.src).pipe(gulp.dest(path.img.dest))
const libs = () => gulp.src(path.libs.src).pipe(gulp.dest(path.libs.dest))

module.exports.default = gulp.series(delDist, gulp.parallel(html, js, css, img, libs, watch, server))